/**
 * @description: 用户登入
 * @author: blue
 */

import React, {Component} from 'react';
import { StyleSheet, Text, View, TextInput, Button, Image, TouchableHighlight } from 'react-native';
import { Layout, Body }  from '../../../components/components';
import { LANG, i18n } from '../../../config/config';

export default class ForgetPassword extends Component {
  static navigationOptions = {
    title: '忘记密码'
  };


  constructor(props) {
    super(props);
    this.state = {
      phoneNumber: '',
      tokenNumber: '',
      newPassword: '',
      againPassword: ''
    };
    this.resetPasswordClick = this.resetPasswordClick.bind(this);
  }

  resetPasswordClick() {

    alert(1);
  }

  render() {
    return (
      <Layout>
        <Body spacing={true} style={{flexDirection: 'column',justifyContent: 'center'}}>
          <View>
            <View style={{marginBottom: 10}}>
              <Image
                source={{uri: 'https://qiye.aliyun.com/static/4848229/images/forNetCN/logo.png'}}
              />
            </View>

            <View style={styles.input}>
              <TextInput
                style={{height: 40}}
                placeholder={i18n[LANG].phoneNumber}
                underlineColorAndroid="transparent"
                onChangeText={(value) => this.setState({phoneNumber: value})}
              />
            </View>

            <View style={{
              borderStyle: 'solid',
              borderWidth: 1,
              borderColor: '#ddd',
              marginBottom: 10,
              flexDirection: 'row',
              justifyContent: 'space-between'
            }}>
              <TextInput
                style={{ height: 40, flex: 18}}
                placeholder={i18n[LANG].tokenNumber}
                underlineColorAndroid="transparent"
                onChangeText={(value) => this.setState({tokenNumber: value})}
              />
              <TouchableHighlight onPress={() => {alert(1)}}>
                <View style={{ flex:6 ,flexDirection: 'column', justifyContent: 'center', paddingRight: 5}}>
                  <Text>获取验证码</Text>
                </View>
              </TouchableHighlight>
            </View>

            <View style={styles.input}>
              <TextInput
                style={{height: 40}}
                placeholder={i18n[LANG].newPassword}
                underlineColorAndroid="transparent"
                onChangeText={(value) => this.setState({newPassword: value})}
              />
            </View>

            <View style={styles.input}>
              <TextInput
                style={{height: 40}}
                placeholder={i18n[LANG].againPassword}
                underlineColorAndroid="transparent"
                onChangeText={(value) => this.setState({againPassword: value})}
              />
            </View>

            <View style={{marginBottom: 10}}>
              <Button
                onPress={this.resetPasswordClick}
                title={i18n[LANG].reset}
                color="#841584"
                accessibilityLabel="forgetPassword"
              />
            </View>
          </View>
        </Body>
      </Layout>
    );
  }
}

let styles =  StyleSheet.create({
  input: {
    borderStyle: 'solid',
    borderWidth: 1,
    borderColor: '#ddd',
    marginBottom: 10,
  }
})
